import 'package:flutter/material.dart';

// 应用入口函数
void main() {
  runApp(const MyApp());
}

// 根组件，使用 MaterialApp
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 开关与复选框演示',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const SwitchAndCheckboxDemoScreen(), // 设置主屏幕
    );
  }
}

// 演示屏幕，是一个 StatefulWidget，因为需要管理状态
class SwitchAndCheckboxDemoScreen extends StatefulWidget {
  const SwitchAndCheckboxDemoScreen({super.key});

  @override
  SwitchAndCheckboxDemoScreenState createState() =>
      SwitchAndCheckboxDemoScreenState();
}

class SwitchAndCheckboxDemoScreenState
    extends State<SwitchAndCheckboxDemoScreen> {
  // 维护单选开关的状态，默认为 true (选中)
  bool _switchSelected = true;
  // 维护标准复选框的状态，默认为 true (选中)
  bool _checkboxSelected = true;
  // 维护三态复选框的状态，默认为 null (不确定状态)
  // bool? 表示这个布尔值可以为 true, false, 或 null
  bool? _tristateCheckboxSelected;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('单选开关 (Switch) 和复选框 (Checkbox)')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start, // 子组件左对齐
          children: <Widget>[
            // --- 单选开关 (Switch) ---
            Text(
              '设置通知:',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            Row(
              children: <Widget>[
                Switch(
                  value: _switchSelected, // 当前开关的状态
                  activeColor: Colors.green, // 激活状态下的颜色
                  inactiveThumbColor: Colors.grey[300], // 非激活状态下拇指的颜色
                  inactiveTrackColor: Colors.grey[400], // 非激活状态下轨道的颜色
                  onChanged: (bool value) {
                    // 当开关状态改变时调用
                    setState(() {
                      // 调用 setState 来通知 Flutter 框架UI需要更新
                      _switchSelected = value;
                    });
                  },
                ),
                Text(_switchSelected ? '通知已开启' : '通知已关闭'),
              ],
            ),
            SizedBox(height: 20), // 添加一些垂直间距
            // --- 标准复选框 (Checkbox) ---
            Text(
              '记住密码:',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            Row(
              children: <Widget>[
                Checkbox(
                  value: _checkboxSelected, // 当前复选框的状态
                  activeColor: Colors.red, // 选中时的颜色
                  checkColor: Colors.white, // 选中时勾号的颜色
                  onChanged: (bool? value) {
                    // 当复选框状态改变时调用
                    // 注意：标准 Checkbox 的 onChanged 回调参数是 bool?
                    // 但由于 tristate 默认为 false，value 只会是 true 或 false
                    setState(() {
                      _checkboxSelected =
                          value ?? false; // 如果 value 为 null，则默认为 false
                    });
                  },
                ),
                Text(_checkboxSelected ? '已记住密码' : '未记住密码'),
              ],
            ),
            SizedBox(height: 20),

            // --- 三态复选框 (Checkbox with tristate: true) ---
            Text(
              '任务状态 (三态):',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            Row(
              children: <Widget>[
                Checkbox(
                  value:
                      _tristateCheckboxSelected, // 当前三态复选框的状态 (true, false, null)
                  tristate: true, // 开启三态模式
                  activeColor: Colors.orange, // 选中时的颜色
                  checkColor: Colors.black, // 选中时勾号/横线的颜色
                  onChanged: (bool? value) {
                    // 当复选框状态改变时调用
                    setState(() {
                      _tristateCheckboxSelected = value;
                    });
                  },
                ),
                Text(
                  _tristateCheckboxSelected == null
                      ? '部分完成'
                      : (_tristateCheckboxSelected! ? '全部完成' : '未开始'),
                ),
              ],
            ),
            SizedBox(height: 30),

            // --- 显示当前状态值 (用于调试或演示) ---
            Text(
              '当前状态值:',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            Text('单选开关 (Switch): $_switchSelected'),
            Text('复选框 (Checkbox): $_checkboxSelected'),
            Text('三态复选框 (Tristate Checkbox): $_tristateCheckboxSelected'),
          ],
        ),
      ),
    );
  }
}
